<template>
  <div class="login">
    <Row
      type="flex"
      justify="center"
      align="middle"
      id="login"
      v-bind:style="{ height: loginBodyHeight + 'px' }"
    >
      <Col :xs="22" :sm="12" :md="12" :lg="4">
        <div id="loginBox">
          <p id="loginTitle">
            <span>登陆</span>
          </p>
          <!--表单-->
          <Form ref="loginForm" :model="loginForm" :rules="loginRule">
            <FormItem prop="name">
              <Input
                type="text"
                v-model="loginForm.name"
                placeholder="请输入用户名"
              ></Input>
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                v-model="loginForm.password"
                placeholder="请输入密码"
              ></Input>
            </FormItem>
            <FormItem style="text-align:center;">
              <Button @click="handleSubmit('loginForm')">提交</Button>
              <Button type="text">忘记密码</Button>
            </FormItem>
          </Form>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    //表单验证方法
    const validateUser = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入正确的用户名"));
      } else {
        callback();
      }
    };
    const validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入正确的密码"));
      } else {
        callback();
      }
    };
    return {
      loginBodyHeight: 400,
      loginForm: {
        name: "",
        password: ""
      },
      loginRule: {
        name: [
          {
            validator: validateUser,
            trigger: "blur"
          }
        ],
        password: [
          {
            validator: validatePass,
            trigger: "blur"
          }
        ]
      }
    };
  },
  computed: {},
  mounted() {
    //登陆界面高度默认值
    this.loginBodyHeight = document.documentElement.clientHeight;
    //onresize 监听浏览器窗口改变时修改组件高度
    window.addEventListener("resize", () => {
      let bodyHeight = document.documentElement.clientHeight;
      if (bodyHeight > 400) {
        this.loginBodyHeight = document.documentElement.clientHeight;
      } else {
        this.loginBodyHeight = 400;
      }
    });
  },
  methods: {
    handleSubmit(name) {
      //利用$axios向后台发送请求
      let _self = this;
      this.$refs[name].validate(valid => {
        if (valid) {
          //利用qs解决后台获取不到post数据
          var obj = {
            name: this.loginForm.name,
            password: this.loginForm.password
          };
          this.$axios
            .post("/user/login", obj, {
              "Content-Type": "application/json"
            })
            .then(res => {
              if (!res.data.sta) {
                _self.$Message.error("登陆失败");
              } else {
                window.sessionStorage.setItem("token", res.data.token); //存储token
                window.sessionStorage.setItem("user", _self.loginForm.name); //存储用户名
                _self.$router.push({
                  path: "/home"
                }); //路由跳转
              }
            });
        }
      });
    }
  },
  components: {}
};
</script>
<style scoped="scoped" media="screen">
#login {
  background-color: #f7f7f7;
  height: 220px;
}

#loginBox {
  height: 220px;
  width: 100%;
}

#loginTitle {
  display: block;
  height: 40px;
  font-size: 25px;
  color: #73879c;
  text-align: center;
  margin-bottom: 24px;
}

#loginTitle::after,
#loginTitle::before {
  content: "";
  width: 20%;
  height: 1px;
  background: #7e7e7e;
  position: absolute;
  top: 20px;
}

#loginTitle::before {
  left: 0;
}

#loginTitle::after {
  right: 0;
}

#loginLostPwdBtn {
  margin-left: 30px;
}

#loginInfo {
  text-align: center;
  border-top: 1px solid #d8d8d8;
  padding-top: 10px;
}

#loginLinkCreateAccount {
  color: #73879c;
}

#loginLinkCreateAccount a {
  color: #73879c;
}

#loginLinkCreateAccount a:hover {
  color: #23527c;
}

#loginCompanyLogo {
  font-size: 25px;
  margin: 30px 0;
}
</style>
